<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="${contextPath}/layui/css/layui.css"/>
    <script type="text/javascript" src="${contextPath}/layui/layui.js"></script>
    <style>
        body {
            padding: 10px 20px 10px 20px;
        }
    </style>
</head>
<body>
<form class="layui-form layui-row layui-col-space16">
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="memo" placeholder="请输入" class="layui-input" lay-affix="clear">
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">cron</label>
            <div class="layui-input-block">
                <input type="text" name="cron" placeholder="请输入" class="layui-input" lay-affix="clear">
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">方法名</label>
            <div class="layui-input-block">
                <input type="text" name="methodName" placeholder="请输入" class="layui-input" lay-affix="clear">
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">groovy脚本</label>
            <div class="layui-input-block">
                <input type="text" name="groovyContext" placeholder="请输入" class="layui-input" lay-affix="clear">
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">启动时加载</label>
            <div class="layui-input-block">
                <select name="isStartCron">
                    <option value="" selected>全部</option>
                    <option value="0">不加载</option>
                    <option value="1">加载</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">启动时执行</label>
            <div class="layui-input-block">
                <select name="isStartRun">
                    <option value="" selected>全部</option>
                    <option value="0">不执行</option>
                    <option value="1">执行</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-btn-container layui-col-xs12">
        <button class="layui-btn" lay-submit lay-filter="table-search">查询</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
<!-- 原始容器 -->
<table class="layui-hide" id="table"></table>
<!-- 工具栏模板 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新建</button>
    </div>
</script>
<!-- 状态列 -->
<script type="text/html" id="table-templet-status">
    <div class="layui-clear-space">
        <input type="checkbox" name="BBB" title="启动|停止" lay-skin="switch" disabled {{=d.status == "1" ? "checked" :
        "" }}>
    </div>
</script>
<!-- 启动时加载 -->
<script type="text/html" id="table-templet-isStartCron">
    <div class="layui-clear-space">
        <input type="checkbox" name="CCC" title="加载|不加载" lay-skin="switch" disabled {{=d.isStartCron == "1" ? "checked"
        :
        "" }}>
    </div>
</script>
<!-- 启动时执行 -->
<script type="text/html" id="table-templet-isStartRun">
    <div class="layui-clear-space">
        <input type="checkbox" name="CCC" title="执行|不执行" lay-skin="switch" disabled {{=d.isStartRun == "1" ? "checked"
        :
        "" }}>
    </div>
</script>
<!-- 操作列 -->
<script type="text/html" id="table-templet-operator">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="delete" onclick="deleteRow('{{= d.id }}')">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit" onclick="editRow('{{= d.id }}', '{{= d.status }}')">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="task" onclick="doTask('{{= d.id }}', '{{= d.status }}')">{{=
            d.status == '1' ? '卸载' : '加载' }}</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit" onclick="runOnce('{{= d.id }}')">执行</a>
    </div>
</script>
<!-- 弹出层 -->
<div id="edit-layer-wrapper" style="display: none;">
    <div class="layui-form" lay-filter="filter-edit-layer" style="margin: 16px;">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input type="text" name="input-id" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="input-memo" placeholder="请输入" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">cron</label>
            <div class="layui-input-block">
                <input type="text" name="input-cron" placeholder="请输入" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">方法名</label>
            <div class="layui-input-block">
                <input type="text" name="input-methodName" placeholder="请输入" class="layui-input"
                       lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">groovy脚本</label>
            <div class="layui-input-block">
                <textarea name="input-groovyContext" placeholder="请输入" class="layui-textarea"
                          lay-verify="required"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">启动时加载</label>
            <div class="layui-input-block">
                <input type="checkbox" name="input-isStartCron" lay-skin="switch" title="加载|不加载" value="1">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">启动时执行</label>
            <div class="layui-input-block">
                <input type="checkbox" name="input-isStartRun" lay-skin="switch" title="执行|不执行" value="1">
            </div>
        </div>
    </div>
</div>
<script>
    let table;
    let form;
    let index;
    let $;

    layui.use(['form', 'table'], function () {
        $ = layui.$;
        table = layui.table;
        form = layui.form;

        var inst = table.render({
            elem: '#table',
            cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 150, fixed: 'left'},
                {field: 'memo', title: '描述', width: 150},
                {field: 'cron', title: 'cron', width: 150},
                {field: 'methodName', title: '方法名', width: 150},
                {field: 'groovyContext', title: 'groovy脚本', minWidth: 300},
                {field: 'status', title: '状态', hide: true, width: 90, templet: '#table-templet-status'},
                {field: 'isStartCron', title: '启动时加载', width: 150, templet: '#table-templet-isStartCron'},
                {field: 'isStartRun', title: '启动时执行', width: 150, templet: '#table-templet-isStartRun'},
                {field: 'operator', title: '操作', width: 200, fixed: 'right', templet: '#table-templet-operator'},
            ]],
            url: '${contextPath}/task/list',
            method: 'post',
            contentType: 'application/json',
            page: true,
            toolbar: '#toolbarDemo',
        });

        // 搜索提交
        form.on('submit(table-search)', function (data) {
            let field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reloadData('table', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            return false; // 阻止默认 form 跳转
        });

        // 头部工具栏事件
        table.on('toolbar(table)', function (obj) {
            let options = obj.config; // 获取当前表格属性配置项
            let checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
            console.log(checkStatus, obj); // 查看对象所有成员

            // 根据不同的事件名进行相应的操作
            switch (obj.event) { // 对应模板元素中的 lay-event 属性值
                case 'add':
                    index = openRow();
                    break;
            }
        });
    })

    function openRow() {
        return layer.open({
            type: 1, // page 层类型，其他类型详见「基础属性」
            title: '新增',
            content: $('#edit-layer-wrapper'),
            area: '520px',
            btn: ['保存', '取消'],
            btn1: function (index, layero, that) {
                form.submit('filter-edit-layer', function (data) {
                    let field = data.field; // 获取表单全部字段值
                    for (let key in field) {
                        let newkey = key.replace('input-', '');
                        field[newkey] = field[key];
                        delete field[key];
                    }

                    if (!field.isStartCron) field.isStartCron = "0";
                    if (!field.isStartRun) field.isStartRun = "0";

                    fetch("${contextPath}/task/save", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(field)
                    })
                        .then(response => response.json())
                        .then(res => {
                            if (res.code === 0) {
                                form.val('filter-edit-layer', {
                                    "input-id": "",
                                    "input-memo": "",
                                    "input-cron": "",
                                    "input-methodName": "",
                                    "input-groovyContext": "",
                                    "input-isStartCron": "",
                                    "input-isStartRun": "",
                                });
                                table.reloadData('table', {});
                                layer.close(index);
                            } else {
                                layer.msg(res.msg);
                            }
                        })
                        .catch(err => layer.msg(err))
                });
            },
            btn2: function (index, layero, that) {
                form.val('filter-edit-layer', {
                    "input-id": "",
                    "input-memo": "",
                    "input-cron": "",
                    "input-methodName": "",
                    "input-groovyContext": "",
                    "input-isStartCron": "",
                    "input-isStartRun": "",
                });
            },
        });
    }

    function deleteRow(id) {
        let idx = layer.confirm('确定要删除么？', {icon: 3}, function () {
            fetch("${contextPath}/task/delete?id=" + id)
                .then(response => response.json())
                .then(res => {
                    if (res.code !== 0) {
                        layer.msg(res.msg);
                    }
                    layer.close(idx);
                    table.reloadData('table', {});
                })
                .catch(err => {
                    layer.msg(err)
                    layer.close(idx);
                })
        }, function () {
            layer.close(idx);
        });
    }

    function editRow(id, status) {
        if (status === '1') {
            layer.msg("先停止任务再进行编辑");
            return;
        }

        fetch("${contextPath}/task/get?id=" + id)
            .then(response => response.json())
            .then(res => {
                if (res.code === 0) {
                    let data = res.data;
                    for (let key in data) {
                        let newkey = 'input-' + key;
                        data[newkey] = data[key];
                        delete data[key];
                    }

                    data["input-isStartCron"] = data["input-isStartCron"] === "1";
                    data["input-isStartRun"] = data["input-isStartRun"] === "1";

                    form.val('filter-edit-layer', data);
                    index = openRow();
                } else {
                    layer.msg(res.msg);
                }
            })
            .catch(err => layer.msg(err))
    }

    function doTask(id, status) {
        let url;
        if (status === '1')
            url = "${contextPath}/task/stop?id=" + id;
        else if (status === '0')
            url = "${contextPath}/task/start?id=" + id;
        fetch(url)
            .then(response => response.json())
            .then(res => {
                if (res.code !== 0) {
                    layer.msg(res.msg);
                }
                table.reloadData('table', {});
            })
            .catch(err => layer.msg(err))
    }

    function runOnce(id) {
        fetch("${contextPath}/task/runOnce?id=" + id)
            .then(response => response.json())
            .then(res => {
                if (res.code === 0) {
                    layer.msg("任务执行成功");
                } else {
                    layer.msg(res.msg);
                }
            })
            .catch(err => layer.msg(err))
    }
</script>
</body>
</html>